<template>
	<scroll-view class="ff-scroll" :style="zStyle" @touchstart="pageTouchstart" @touchmove="pageTouchmove"
		@touchend="pageTouchend" @touchcancel="pageTouchcancel" @mouseup="pageTouchend" @mousedown="pageTouchstart"
		@mousemove="pageTouchmove" @mouseout="pageTouchend" :scroll-y="scrollY" :scroll-x="scrollX"
		@scroll="pageScroll">
		<slot></slot>
	</scroll-view>
</template>

<script>
	export default {
		name: "ff-scroll",
		components: {},
		props: {
			scrollX: {
				type: Boolean,
				default: false
			},
			scrollY: {
				type: Boolean,
				default: true
			},
			showScrollbar: {
				type: Boolean,
				default: true
			},
			overflow: {
				type: String,
				default: 'hidden',
			},
		},
		data() {
			return {
				// 下拉刷新
				location: {
					startY: null,
					startX: null,
					moveY: null,
					moveX: null,
					diffY: 0,
					diffX: 0,
				},
			};
		},
		computed: {
			zStyle() {
				let style = {
					// transform: 'translateY(' + this.translateY + ') translateX(' + this.translateX + ')',
					// 'margin-top': this.translateY,
					// 'margin-bottom': this.translateX,
					// transition: 'unset',
				}
				if (this.location.startY == null) {
					// style['transition'] = '0.5s';
				} else if (this.location.startX == null) {
					// style['transition'] = '0.5s';
				}
				return style
			},
			translateY() {
				if (this.scrollY && this.location.startY != null) {
					if (this.location.diffY >= 80) {
						return this.location.diffY * 0.2 + 'px'
					} else if (this.location.diffY >= 50) {
						return this.location.diffY * 0.3 + 'px'
					} else if (this.location.diffY >= 30) {
						return this.location.diffY * 0.5 + 'px'
					} else if (this.location.diffY >= 0) {
						return this.location.diffY + 'px'
					} else if (this.location.diffY <= -80) {
						return this.location.diffY * 0.2 + 'px'
					} else if (this.location.diffY <= -50) {
						return this.location.diffY * 0.3 + 'px'
					} else if (this.location.diffY <= -30) {
						return this.location.diffY * 0.5 + 'px'
					}
					return this.location.diffY + 'px'
				} else {
					return '0px'
				}
			},
			translateX() {
				if (this.scrollX && this.location.startX != null) {
					if (this.location.diffX >= 80) {
						return this.location.diffX * 0.2 + 'px'
					} else if (this.location.diffX >= 50) {
						return this.location.diffX * 0.3 + 'px'
					} else if (this.location.diffX >= 30) {
						return this.location.diffX * 0.5 + 'px'
					} else if (this.location.diffX >= 0) {
						return this.location.diffX + 'px'
					} else if (this.location.diffX <= -80) {
						return this.location.diffX * 0.2 + 'px'
					} else if (this.location.diffX <= -50) {
						return this.location.diffX * 0.3 + 'px'
					} else if (this.location.diffX <= -30) {
						return this.location.diffX * 0.5 + 'px'
					}
					return this.location.diffX + 'px'
				} else {
					return '0px'
				}
			},
		},
		methods: {
			pageTouchstart(e) {
				if (e.type == 'mousedown') {
					this.location = {
						startY: e.pageY,
						startX: e.pageX,
						moveY: e.pageY,
						moveX: e.pageX,
						diffY: 0,
						diffX: 0,
					}
				} else if (e.type == 'touchstart') {
					this.location = {
						startY: e.touches[0].pageY,
						startX: e.touches[0].pageX,
						moveY: e.touches[0].pageY,
						moveX: e.touches[0].pageX,
						diffY: 0,
						diffX: 0,
					}
				}
				this.$emit("touchstart", e)
			},
			pageTouchmove(e) {
				if (e.type == 'touchmove') {
					this.location.moveY = e.touches[0].pageY
					this.location.moveX = e.touches[0].pageX
				} else if (e.type == 'mousemove') {
					this.location.moveY = e.pageY
					this.location.moveX = e.pageX
				}
				if (this.location.startY != null) {
					this.location.diffY = this.location.moveY - this.location.startY
				}
				if (this.location.startX != null) {
					this.location.diffX = this.location.moveX - this.location.startX
				}
				this.$emit("touchmove", e)
			},
			pageTouchend(e) {
				this.location = {
					startY: null,
					startX: null,
					moveY: null,
					moveX: null,
					diffY: 0,
					diffX: 0,
				}
				this.$emit("touchend", e)
			},
			pageTouchcancel(e) {
				this.location = {
					startY: null,
					startX: null,
					moveY: null,
					moveX: null,
					diffY: 0,
					diffX: 0,
				}
				this.$emit("touchcancel", e)
			},
			pageScroll(e) {
				if (e.type == 'scroll') {
					this.$emit("scroll", e)
				}
			}
		}
	}
</script>

<style scoped>
	@import "../../librarys/css/components.css";
	
	.ff-scroll {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
	}
</style>